<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="Onitsuka_1.css" />
		<link rel="stylesheet" type="text/css" href="Onitsuka_2.css" />
		<link rel="stylesheet" type="text/css" href="download/font_1963390_hdoz6qydc2g/iconfont.css" />
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<p class="header-p">全场任意消费可享免费配送服务</p>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<a href="Onitsuka.html" class="nav-logo"><img src="img/logo.png"></a>
			<ul class="nav-ul">
				<li class="nav-li" id="navLi1"><a href="newClothes.html" id="navA1">新品</a></li>
				<li class="nav-li" id="navLi2"><a href="" id="navA2">系列</a></li>
				<li class="nav-li" id="navLi3"><a href="" id="navA3">男子</a></li>
				<li class="nav-li" id="navLi4"><a href="" id="navA4">女子</a></li>
				<li class="nav-li" id="navLi5"><a href="" id="navA5">儿童</a></li>
			</ul>
			<input type="text" name="" id="navInput" placeholder="立即搜索" /><span class="iconfont iconsousuo"></span>
			<ul class="nav-icon">
				<li class="nav-iconLi"><a href=""><span class="nav-iconSp">HLEP</span>客服中心</a></li>
				<li class="nav-iconLi"><a href=""><span class="iconfont iconnav_icon_location"></span>店铺导航</a></li>
				<li class="nav-iconLi"><a href="MyselfCenter.html"><span class="iconfont iconrenwu"></span>个人中心</a></li>
				<li class="nav-iconLi" id="navLi6"><a href=""><span class="iconfont iconshoppingCart-full"></span>购物车</a></li>
			</ul>
		</div>
		<!-- 轮播图 -->
		<div class="fl_s">
			<div class="tu">
				<img src="lunbotuimg/0.jpg" alt="" style="display:block;" />
				<img src="lunbotuimg/1.jpg" alt="" />
				<img src="lunbotuimg/2.jpg" alt="" />
				<img src="lunbotuimg/3.jpg" alt="" />
			</div>
			<div class="ups">
				<input type="button" class="btn_left" value="<" />
				<input type="button" class="btn_right" value=">" />
			</div>

			<div class="dos">
				<div class="dor">
					<a class="doro"></a>
					<a class="doro"></a>
					<a class="doro"></a>
					<a class="doro"></a>
				</div>
			</div>
		</div>

		<!-- 中心区域 -->
		<a href=""><img src="OnitsukaSY/ia_00.png" class="center-img"></a>
		<a href=""><img src="OnitsukaSY/ia_01.png" class="center-img1"></a>
		<div class="center-box">
			<a href=""><img src="OnitsukaSY/ia_02.png" class="center-img2"></a>
			<a href=""><img src="OnitsukaSY/ia_03.png" class="center-img3"></a>
			<a href=""><img src="OnitsukaSY/ia_04.png" class="center-img4"></a>
		</div>
		<a href=""><img src="OnitsukaSY/ia_05.png" class="center-img5"></a>
		<!-- 为你推荐 -->
		<div class="center-floor">
			<p class="center-floorP">为你推荐</p>
			<div class="center-floorBox">
				<a href=""><img src="OnitsukaSY/1182A078-105-1.jpg" class="center-floorBoxImg"></a>
				<p class="center-floorBoxP1">2种颜色</p>
				<a href="" class="center-floorBoxA">Onitsuka Tiger/鬼塚虎官方新品...</a>
				<p class="center-floorBoxP2">女子/鞋履</p>
				<span class="center-floorBoxSp">￥790</span>
			</div>
			<div class="center-floorBox" id="center-floorBox">
				<a href=""><img src="OnitsukaSY/1182A458-600-1.jpg" class="center-floorBoxImg"></a>
				<p class="center-floorBoxP1">1种颜色</p>
				<a href="" class="center-floorBoxA">Onitsuka Tiger/鬼塚虎女款复古...</a>
				<p class="center-floorBoxP2">女子/鞋履</p>
				<span class="center-floorBoxSp">￥850</span>
			</div>
			<div class="center-floorBox" id="center-floorBox">
				<a href=""><img src="OnitsukaSY/1182A461-400-1.jpg" class="center-floorBoxImg"></a>
				<p class="center-floorBoxP1">1种颜色</p>
				<a href="" class="center-floorBoxA">Onitsuka Tiger/鬼塚虎女款复古...</a>
				<p class="center-floorBoxP2">女子/鞋履</p>
				<span class="center-floorBoxSp">￥750</span>
			</div>
			<div class="center-floorBox" id="center-floorBox" style="border: none;">
				<a href=""><img src="OnitsukaSY/DL408-0146-1.jpg" class="center-floorBoxImg"></a>
				<p class="center-floorBoxP1">5种颜色</p>
				<a href="" class="center-floorBoxA">Onitsuka Tiger/鬼塚虎官方小白...</a>
				<p class="center-floorBoxP2">中性/鞋履</p>
				<span class="center-floorBoxSp">￥790</span>
			</div>
		</div>
		<!-- 下划线 -->
		<div class="center-floorBoxXHX">

		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footer-box1">
				<h3>网站支持</h3>
				<a href="" class="footer-A1">尺码对照表</a>
				<a href="" class="footer-A1">店铺定位器</a>
			</div>
			<div class="footer-box2">
				<h3>客户服务</h3>
				<a href="" class="footer-A2">关于订单</a>
				<a href="" class="footer-A2">练习我们</a>
			</div>
			<div class="footer-box3">
				<h3>关于鬼塚虎</h3>
				<a href="" class="footer-A3">隐私政策&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">关于ONITSUKA TIGER</a>
				<a href="" class="footer-A3">Cookie政策&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">联系方式与咨询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">使用条款和条件</a>
			</div>
			<div class="footer-box4">
				<h3>关注鬼塚虎</h3>
				<a href="" class="footer-A4">官方微博<img src="img/wblogo.png"></a>
				<p class="footer-P1">官方微信</p>
				<img src="img/wx-logo.59012a31.jpg" class="footer-erweima">
				<p class="footer-P2">关注鬼塚虎官方微信</p>
			</div>
		</div>
		<div class="footer-count">
			<p class="footer-countP1">© 2020 ASICS China Corporation</p>
			<p class="footer-countP2">ESTABLISHED IN KOBE, JAPAN, 1949 </p>
			<img src="OnitsukaSY/tiger.03f9c5f4.png">
			<p class="footer-countP3">BY MR KIHACHIRO ONITSUKA</p>
			<p class="footer-countP4">中国大陆&nbsp;<a href="">CHANGE LOCATION</a></p>
		</div>
		<!-- 红色条 -->
		<div class="footer-red">

		</div>
		<!-- 最底部 -->
		<div class="footer-floor">
			<p class="footer-floorP">ONITSUKA TIGER IS A REGISTERED TRADEMARK OF ASICS CORPORATION</p>
			<a href="" class="footer-floorA">沪ICP备10203942号-2&nbsp;</a>
			<a href=""><img src="OnitsukaSY/ia_100000033.jpeg" class="footer-floorImg"></a>
		</div>
		<!-- 购物车的滑入显示框 -->
		<div id="box6">
			<p class="box6-p1">您的购物车为空</p>
			<p class="box6-p2">请<a href="MyselfCenter.html">登录</a>账户查看您的购物车</p>
			<span class="box6-sp" id="box6sp">×</span>
		</div>
		<!-- 二级菜单 -->
		<div id="box1">
			<a href="" class="box1-a" id="box1a1"><img src="OnitsukaSY/ia_100000000.jpg" class="box1-img"><p class="box1p1">最新鞋款</p></a>
			<a href="" class="box1-a" id="box1a2"><img src="OnitsukaSY/ia_100000001.jpg" class="box1-img"><p class="box1p2">HMR PEAK LO <br> HMR PEAK G-<br>TX</p></a>
			<a href="" class="box1-a" id="box1a3"><img src="OnitsukaSY/ia_100000002.jpg" class="box1-img"><p class="box1p3">AUTUMN <br> WINTER 2020</p></a>
			<a href="" class="box1-a" id="box1a4"><img src="OnitsukaSY/ia_100000003.jpg" class="box1-img"><p class="box1p4">DELEGATION <br> EX</p></a>
			<a href="" class="box1-a" id="box1a5"><img src="OnitsukaSY/ia_100000004.png" class="box1-img"><p class="box1p5">李宇春同款</p></a>
		</div>
		<div id="box2">
			<a href="" class="box2-a" id="box2a1"><img src="OnitsukaSY/ia_100000005.png" class="box2-img"><p class="box2p1">CONTEMPOPAR</p></a>
			<a href="" class="box2-a" id="box2a2"><img src="OnitsukaSY/ia_100000006.jpg" class="box2-img"><p class="box2p2">HERITAGE</p></a>
			<a href="" class="box2-a" id="box2a3"><img src="OnitsukaSY/ia_100000007.jpg" class="box2-img"><p class="box2p3">服饰</p></a>
		</div>
		<div id="box3">
			<a href="" class="box3-a" id="box3a1"><img src="OnitsukaSY/ia_100000008.jpg" class="box3-img"><p class="box3p1">鞋履</p></a>
			<a href="" class="box3-a" id="box3a2"><img src="OnitsukaSY/ia_100000009.jpg" class="box3-img"><p class="box3p2">服装</p></a>
			<a href="" class="box3-a" id="box3a3"><img src="OnitsukaSY/ia_100000010.jpg" class="box3-img"><p class="box3p3">配件</p></a>
		</div>
		<div id="box4">
			<a href="" class="box4-a" id="box4a1"><img src="OnitsukaSY/ia_100000011.jpg" class="box4-img"><p class="box4p1">鞋履</p></a>
			<a href="" class="box4-a" id="box4a2"><img src="OnitsukaSY/ia_100000012.jpg" class="box4-img"><p class="box4p2">服装</p></a>
			<a href="" class="box4-a" id="box4a3"><img src="OnitsukaSY/ia_100000013.jpg" class="box4-img"><p class="box4p3">配件</p></a>
		</div>
		<div id="box5">
			<a href="" class="box5-a" id="box5a1"><img src="OnitsukaSY/ia_100000014.jpg" class="box5-img"><p class="box5p1">鞋履</p></a>
			<a href="" class="box5-a" id="box5a2"><img src="OnitsukaSY/ia_100000015.jpg" class="box5-img"><p class="box5p2">服配</p></a>			
		</div>
	</body>
</html>
<script>
	var oNavLi1 = document.querySelector("#navLi1");
	var oNavLi2 = document.querySelector("#navLi2");
	var oNavLi3 = document.querySelector("#navLi3");
	var oNavLi4 = document.querySelector("#navLi4");
	var oNavLi5 = document.querySelector("#navLi5");
	var oNavLi6 = document.querySelector("#navLi6");
	
	var oBox1 = document.querySelector("#box1");
	var oBox2 = document.querySelector("#box2");
	var oBox3 = document.querySelector("#box3");
	var oBox4 = document.querySelector("#box4");
	var oBox5 = document.querySelector("#box5");
	var oBox6 = document.querySelector("#box6");
	
	var oBox1a1 = document.querySelector("#box1a1");
	var oBox1a2 = document.querySelector("#box1a2");
	var oBox1a3 = document.querySelector("#box1a3");
	var oBox1a4 = document.querySelector("#box1a4");
	var oBox1a5 = document.querySelector("#box1a5");
	
	var oBox2a1 = document.querySelector("#box2a1");
	var oBox2a2 = document.querySelector("#box2a2");
	var oBox2a3 = document.querySelector("#box2a3");
	
	var oBox3a1 = document.querySelector("#box3a1");
	var oBox3a2 = document.querySelector("#box3a2");
	var oBox3a3 = document.querySelector("#box3a3");
	
	var oBox4a1 = document.querySelector("#box4a1");
	var oBox4a2 = document.querySelector("#box4a2");
	var oBox4a3 = document.querySelector("#box4a3");
	
	var oBox5a1 = document.querySelector("#box5a1");
	var oBox5a2 = document.querySelector("#box5a2");
	
	var oBox1p1 = document.querySelector(".box1p1");
	var oBox1p2 = document.querySelector(".box1p2");
	var oBox1p3 = document.querySelector(".box1p3");
	var oBox1p4 = document.querySelector(".box1p4");
	var oBox1p5 = document.querySelector(".box1p5");
	
	var oBox2p1 = document.querySelector(".box2p1");
	var oBox2p2 = document.querySelector(".box2p2");
	var oBox2p3 = document.querySelector(".box2p3");
	
	var oBox3p1 = document.querySelector(".box3p1");
	var oBox3p2 = document.querySelector(".box3p2");
	var oBox3p3 = document.querySelector(".box3p3");
	
	var oBox4p1 = document.querySelector(".box4p1");
	var oBox4p2 = document.querySelector(".box4p2");
	var oBox4p3 = document.querySelector(".box4p3");
	
	var oBox5p1 = document.querySelector(".box5p1");
	var oBox5p2 = document.querySelector(".box5p2");
	
	var oBox6sp = document.querySelector("#box6sp");
	
	// 1
	oNavLi1.onmouseover = function(){
		oBox1.style.display = "block";
	}
	// oNavLi1.onmouseout = function(){
	// 	oBox1.style.display = "none";
	// }
	oBox1.onmouseover = function(){
		oBox1.style.display = "block";
	}
	oBox1.onmouseout = function(){
		oBox1.style.display = "none";
	}
	// 2
	oNavLi2.onmouseover = function(){
		oBox2.style.display = "block";
	}
	// oNavLi2.onmouseout = function(){
	// 	oBox2.style.display = "none";
	// }
	oBox2.onmouseover = function(){
		oBox2.style.display = "block";
	}
	oBox2.onmouseout = function(){
		oBox2.style.display = "none";
	}
	// 3
	oNavLi3.onmouseover = function(){
		oBox3.style.display = "block";
	}
	// oNavLi3.onmouseout = function(){
	// 	oBox3.style.display = "none";
	// }
	oBox3.onmouseover = function(){
		oBox3.style.display = "block";
	}
	oBox3.onmouseout = function(){
		oBox3.style.display = "none";
	}
	// 4
	oNavLi4.onmouseover = function(){
		oBox4.style.display = "block";
	}
	// oNavLi4.onmouseout = function(){
	// 	oBox4.style.display = "none";
	// }
	oBox4.onmouseover = function(){
		oBox4.style.display = "block";
	}
	oBox4.onmouseout = function(){
		oBox4.style.display = "none";
	}
	// 5
	oNavLi5.onmouseover = function(){
		oBox5.style.display = "block";
	}
	// oNavLi5.onmouseout = function(){
	// 	oBox5.style.display = "none";
	// }
	oBox5.onmouseover = function(){
		oBox5.style.display = "block";
	}
	oBox5.onmouseout = function(){
		oBox5.style.display = "none";
	}
	//购物车的滑入显示框
	oNavLi6.onmouseover = function(){
		oBox6.style.display = "block";
	}
	oBox6.onmouseover = function(){
		oBox6.style.display = "block";
	}
	oBox6.onmouseout = function(){
		oBox6.style.display = "none";
	}
	oBox6sp.onclick = function(){
		oBox6.style.display = "none";
	}
	// 二级菜单鼠标滑入添加下划线
	// 1
	oBox1a1.onmouseover = function(){
		oBox1p1.style.textDecoration = "underline";
	}
	oBox1a1.onmouseout = function(){
		oBox1p1.style.textDecoration = "none";
	}
	oBox1a2.onmouseover = function(){
		oBox1p2.style.textDecoration = "underline";
	}
	oBox1a2.onmouseout = function(){
		oBox1p2.style.textDecoration = "none";
	}
	oBox1a3.onmouseover = function(){
		oBox1p3.style.textDecoration = "underline";
	}
	oBox1a3.onmouseout = function(){
		oBox1p3.style.textDecoration = "none";
	}
	oBox1a4.onmouseover = function(){
		oBox1p4.style.textDecoration = "underline";
	}
	oBox1a4.onmouseout = function(){
		oBox1p4.style.textDecoration = "none";
	}
	oBox1a5.onmouseover = function(){
		oBox1p5.style.textDecoration = "underline";
	}
	oBox1a5.onmouseout = function(){
		oBox1p5.style.textDecoration = "none";
	}
	// 2
	oBox2a1.onmouseover = function(){
		oBox2p1.style.textDecoration = "underline";
	}
	oBox2a1.onmouseout = function(){
		oBox2p1.style.textDecoration = "none";
	}
	oBox2a2.onmouseover = function(){
		oBox2p2.style.textDecoration = "underline";
	}
	oBox2a2.onmouseout = function(){
		oBox2p2.style.textDecoration = "none";
	}
	oBox2a3.onmouseover = function(){
		oBox2p3.style.textDecoration = "underline";
	}
	oBox2a3.onmouseout = function(){
		oBox2p3.style.textDecoration = "none";
	}
	// 3
	oBox3a1.onmouseover = function(){
		oBox3p1.style.textDecoration = "underline";
	}
	oBox3a1.onmouseout = function(){
		oBox3p1.style.textDecoration = "none";
	}
	oBox3a2.onmouseover = function(){
		oBox3p2.style.textDecoration = "underline";
	}
	oBox3a2.onmouseout = function(){
		oBox3p2.style.textDecoration = "none";
	}
	oBox3a3.onmouseover = function(){
		oBox3p3.style.textDecoration = "underline";
	}
	oBox3a3.onmouseout = function(){
		oBox3p3.style.textDecoration = "none";
	}
	// 4
	oBox4a1.onmouseover = function(){
		oBox4p1.style.textDecoration = "underline";
	}
	oBox4a1.onmouseout = function(){
		oBox4p1.style.textDecoration = "none";
	}
	oBox4a2.onmouseover = function(){
		oBox4p2.style.textDecoration = "underline";
	}
	oBox4a2.onmouseout = function(){
		oBox4p2.style.textDecoration = "none";
	}
	oBox4a3.onmouseover = function(){
		oBox4p3.style.textDecoration = "underline";
	}
	oBox4a3.onmouseout = function(){
		oBox4p3.style.textDecoration = "none";
	}
	// 5
	oBox5a1.onmouseover = function(){
		oBox5p1.style.textDecoration = "underline";
	}
	oBox5a1.onmouseout = function(){
		oBox5p1.style.textDecoration = "none";
	}
	oBox5a2.onmouseover = function(){
		oBox5p2.style.textDecoration = "underline";
	}
	oBox5a2.onmouseout = function(){
		oBox5p2.style.textDecoration = "none";
	}
</script>
<script src="jQuery.js"></script>
<script>
	$(function() {
		var c = 0

		function timer() {
			c++;
			c = (c == 4) ? 0 : c;
			//获得序号
			$('.fl_s .tu img').eq(c).stop().show().siblings().hide();
			$('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
		}

		time = setInterval(timer, 2000);
		$('.fl_s').hover(function() {
			//清除定时器//显示图片
			clearInterval(time);
			$('.ups').css({
				'display': 'block'
			});
		}, function() {
			//回调函数//恢复定时器//隐藏图片
			$('.fl_s .ups').css({
				'display': 'none'
			});
			time = setInterval(timer, 2000);
		})
		//右单击
		$('.fl_s .btn_right').click(function() {
			c++;
			c = (c == 4) ? 0 : c;
			//获得的序号
			$('.fl_s .tu img').eq(c).stop().show().siblings().hide();
			$('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
		})
		//左单击
		$('.fl_s .btn_left').click(function() {
			c--;
			c = (c == 0) ? 0 : c;
			//获得序号
			$('.fl_s .tu img').eq(c).stop().show().siblings().hide();
			$('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
		})
		//点击圆点变换
		$('.fl_s .dos .dor a').click(function() {
			//获得序号
			var n = $(this).index();

			$('.fl_s .tu img').eq(n).stop().show().siblings().hide();

			$('.fl_s .dos .dor a').eq(n).stop().addClass('dors').siblings().removeClass('dors');
		})
	})
</script>
